<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>对 element 的 resize 测试 </title>
    <style>
        body {
        margin: 0;
        background: #e6e6e6;
        }
        .container {
        position: relative;
        }
        #item-left,
        #item-right {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 200px;
        height: 200px;
        background: #2ecc71;
        }
        #item-right {
        left: 50%;
        }
        .controller {
        position: absolute;
        z-index: 1000;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border: 1px solid #fff;
        background: #3498db;
        cursor: se-resize;
        font-size: 0px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="container-left">
          <div id="item-left">
            <div id="controller-left" class="controller"></div>
          </div>
        </div>
        <div class="container-right">
          <div id="item-right">
            <div id="controller-right" class="controller"></div>
          </div>
        </div>
      </div>

    <script>
        var left = document.getElementById('item-left');
        var right = document.getElementById('item-right');
        var controllerLeft = document.getElementById('controller-left');
        var controllerRight = document.getElementById('controller-right');

        var isLeftMousedown = false;
        var isRightMousedown = false;
        var lastMouseX = 0;
        var lastMouseY = 0;

        reset();
        window.addEventListener('resize', reset);

        onelresize(left, function () {
        right.style.width = left.offsetWidth + 'px';
        right.style.height = left.offsetHeight + 'px';
        });

        onelresize(right, function () {
        left.style.width = right.offsetWidth + 'px';
        left.style.height = right.offsetHeight + 'px';
        });

        document.addEventListener('mousemove', handleMove);
        document.addEventListener('touchmove', handleMove);

        controllerLeft.addEventListener('mousedown', handleLeftDown);
        controllerLeft.addEventListener('touchstart', handleLeftDown);

        controllerRight.addEventListener('mousedown', handleRightDown);
        controllerRight.addEventListener('touchstart', handleRightDown);

        document.addEventListener('mouseup', handleUp);
        document.addEventListener('blur', handleUp);
        document.addEventListener('touchend', handleUp);
        document.addEventListener('touchcancel', handleUp);

        function reset() {
        var width = Math.floor(window.innerWidth / 4) + 'px';
        var height = Math.floor(window.innerheight * 3 / 4) + 'px';
        left.style.width = width;
        left.style.height = height;
        right.style.width = width;
        right.style.height = height;
        }

        function handleMove(e) {
        var el;
        if (isLeftMousedown) {
            el = left;
        } else if (isRightMousedown) {
            el = right;
        } else {
            return;
        }

        var contact = e.changedTouches ? e.changedTouches[0] : e;

        el.style.width = el.offsetWidth + contact.clientX - lastMouseX + 'px';
        el.style.height = el.offsetHeight + contact.clientY - lastMouseY + 'px';

        lastMouseX = contact.clientX;
        lastMouseY = contact.clientY;
        }

        function handleDown(e) {
        e.preventDefault();
        var contact = e.changedTouches ? e.changedTouches[0] : e;
        lastMouseX = contact.clientX;
        lastMouseY = contact.clientY;
        }

        function handleLeftDown(e) {
        handleDown(e);
        isLeftMousedown = true;
        left.style.willChange = 'width,height';
        }

        function handleRightDown(e) {
        handleDown(e);
        isRightMousedown = true;
        right.style.willChange = 'width,height';
        }

        function handleUp() {
        isLeftMousedown = false;
        isRightMousedown = false;
        left.style.willChange = '';
        right.style.willChange = '';
        }

        //////////\\\///\\\\\\\\\\

        // scroll passive events
        var passiveEvents = false;
        try {
        var opts = Object.defineProperty({}, 'passive', {
            get: function () {
            passiveEvents = { passive: true };
            } });

        window.addEventListener('test', null, opts);
        } catch (e) {}

        function onelresize(el, handler) {
        if (!(el instanceof HTMLElement)) {
            throw new TypeError("Parameter 1 is not instance of 'HTMLElement'.");
        }
        // https://www.w3.org/TR/html/syntax.html#writing-html-documents-elements
        if (/^(area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr|script|style|textarea|title)$/i.test(el.tagName)) {
            throw new TypeError('Unsupported tag type. Change the tag or wrap it in a supported tag(e.g. div).');
        }
        if (typeof handler !== 'function') {throw new TypeError("Parameter 2 is not of type 'function'.");}

        var lastWidth = el.offsetWidth || 1;
        var lastHeight = el.offsetHeight || 1;
        var maxWidth = 10000 * lastWidth;
        var maxHeight = 10000 * lastHeight;

        var expand = document.createElement('div');
        expand.style.cssText = 'position:absolute;top:0;bottom:0;left:0;right:0;z-index=-10000;overflow:hidden;visibility:hidden;';
        var shrink = expand.cloneNode(false);

        var expandChild = document.createElement('div');
        expandChild.style.cssText = 'transition:0s;animation:none;';
        var shrinkChild = expandChild.cloneNode(false);

        expandChild.style.width = maxWidth + 'px';
        expandChild.style.height = maxHeight + 'px';
        shrinkChild.style.width = '250%';
        shrinkChild.style.height = '250%';

        expand.appendChild(expandChild);
        shrink.appendChild(shrinkChild);
        el.appendChild(expand);
        el.appendChild(shrink);

        if (expand.offsetParent !== el) {
            el.style.position = 'relative';
        }

        expand.scrollTop = shrink.scrollTop = maxHeight;
        expand.scrollLeft = shrink.scrollLeft = maxWidth;

        var newWidth = 0;
        var newHeight = 0;
        function onResize() {
            if (newWidth !== lastWidth || newHeight !== lastHeight) {
            lastWidth = newWidth;
            lastHeight = newHeight;
            handler();
            }
        }

        function onScroll() {
            newWidth = el.offsetWidth || 1;
            newHeight = el.offsetHeight || 1;
            if (newWidth !== lastWidth || newHeight !== lastHeight) {
            requestAnimationFrame(onResize);
            }
            expand.scrollTop = shrink.scrollTop = maxHeight;
            expand.scrollLeft = shrink.scrollLeft = maxWidth;
        }

        expand.addEventListener('scroll', onScroll, passiveEvents);
        shrink.addEventListener('scroll', onScroll, passiveEvents);
        }
    </script>
</body>

<!-- https://blog.crimx.com/2017/07/15/element-onresize/ -->